Align collection settings modal with Penpot design (#631)#687
Align collection settings modal with Penpot design (#631)#687Roshan-Singh-07 wants to merge 4 commits intoEXXETA:mainfrom
Conversation
There was a problem hiding this comment.
There's still a lot off. @giemic8 or @kwerber you're more familiar with our designs, maybe you can check.
What I found just by looking:
- The tab trigger color is wrong now
- Wrong color in Dialog Header background
- Wrong text color in input fields
Also, please check if the issue is already assigned to someone. Our colleague @eugen-soliar is already working on this :D
|
Thanks for the review! I’ve updated the implementation to address the points mentioned: • Adjusted tab trigger colors to better match the Penpot design I’ve tested the UI against the design and it should now be aligned. If anything still looks off, please let me know I’m happy to make further adjustments. Screen.Recording.2026-02-05.235820.mp4 |
eugen-soliar
left a comment
eugen-soliar
left a comment
There was a problem hiding this comment.
Plz reassign this issue for yourself.
Issue
I don’t seem to have permission to assign the issue. Could someone assign it to me? |
Ah, leave it be. I have just unassigned. I Assume it will do for now |
We can only assign issues to you if you comment under the issue :) Concerning the PR, there are still some colors off the design. Please read the issue requirements carefully and check the screenshot of the expected design with the actual colors in the implementation (see my last comment). |
…heckbox, and color hierarchy
|
I carefully reviewed the issue description and screenshots and made additional adjustments to layout, spacing, background hierarchy, table styling, checkbox and icon behavior, and overall color consistency so the modal now matches the intended design more closely. Please let me know if there are still any differences or areas that need refinement. I’m happy to continue iterating until everything is fully aligned. |
SoulKa
left a comment
SoulKa
left a comment
There was a problem hiding this comment.
I don't see this being merged in near future. This does not improve things.
| <> | ||
| <Button | ||
| className="h-fit gap-1 pl-0 hover:bg-transparent" | ||
| className="mx-6 flex h-9 items-center gap-2 text-[#e8e8e8] hover:bg-transparent hover:text-white" |
There was a problem hiding this comment.
text-primary instead of e8e8e8. Do not use hardcoded colors anywhere, ever. This breaks our theming system. Same for the hover color. Use either a brightness effect or text-secondary
| </Button> | ||
|
|
||
| <Divider className="mb-4" /> | ||
| <div className="mx-6 mt-1 border-b border-[#2a2a2a]" /> |
There was a problem hiding this comment.
we have a divider color in our CSS. I don't see why the divider component was removed at all.
| <Trash2 /> | ||
| </Button> | ||
| </TableCell> | ||
| <div className="mx-6 mt-4 overflow-hidden rounded-xl border border-[#2a2a2a] bg-[#111111]"> |
There was a problem hiding this comment.
again hardcoded colors. I don't think they're even in the design. Please stick to the theme colors.
- replaced hardcoded colors with theme tokens - fixed modal header/content background hierarchy - updated table component to use design system colors - improved spacing, hover states and typography
|
Refined implementation to better align with the design system:
This should now closely match the Penpot design. Happy to refine further if anything is still off. |
3 participants
This PR aligns the Collection Settings Modal with the official Penpot design to improve visual consistency and UX.
Screen.Recording.2026-02-03.230207.mp4
Closes #631